<nav [hidden]="!isVisible">
  <ul class="pagination">
    <li [class.disabled]="!previousEnabled" (click)="previousNext(-1, $event)">
      <a aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    @for (page of pages; track page) {
        <li (click)="changePage(page, $event)" [class.active]="currentPage === page">
          <a>{{ page }}</a>
        </li>
    }
    <li [class.disabled]="!nextEnabled" (click)="previousNext(1, $event)">
      <a aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>